<template>
    <div>
        <span>当前省份: {{ cityName || '河南' }}</span>
        <ve-map height="600px" :data="chartData" :settings="chartSettings" :events="chartEvents"></ve-map>
    </div>
</template>

<script>
    export default {
        name: "MapInfo",
        watch:{
            area:{
                handler(val){
                    this.chartData.rows = val
                }
            }
        },
        computed:{
          area(){
              return this.$store.state.countData.area
            }
        },
        data () {
            this.chartSettings = {
                position: 'china',
                // selectData: true,
                selectedMode: 'single',
                labelMap:{
                    provinceName:'位置',
                    curedCount:'治愈人数',
                    confirmedCount:'确诊人数',
                    deadCount:'死亡人数',
                },
            }
            this.chartEvents = {
                click: (v) => {
                    this.cityName = v.name
                }
            }
            return {
                cityName: '',
                chartData: {
                    columns: ['provinceName', 'confirmedCount','deadCount'],
                    rows:  []
                }
            }
        },

    }
</script>

<style scoped>

</style>
